<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="轮播图像">
      <el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"
        :on-before-remove="beforeRemove" @change="watchUpload" @remove="handleRemove"
        :on-preview="handlePictureCardPreview" :limit="1">
        <el-icon>
          <Plus />
        </el-icon>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="form.imageUrl" alt="Preview Image" style="width: 100%;" />
        </el-dialog>
      </el-upload>
    </el-form-item>
    <el-form-item label="跳转链接">
      <el-input v-model="form.targetUrl" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.stop="onSubmit">确定</el-button>
      <el-button @click.stop="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watchEffect, shallowRef } from 'vue';
import { useUserStore } from '../../store/user.js'
import fileToBase64 from '../../untils/base64.js'
import { AddRotating,ChangeRotating } from '../../api/event.js';
import getDetailedDateTime from '../../untils/time.js'
import showMessage from '../../untils/elMessage.js';


const MAX_FILE_SIZE = (0.75 * 1024 * 1024); // 设置文件大小上限为 1MB
const userStore = useUserStore();

// 可以绑定多个事件,但是必须只有一个emits
const emits = defineEmits(['close', 'confirm', 'closeChange', 'confirmChange'])  //注册事件，声明事件


const data = reactive({
  category: ''
})

const form = reactive({
  targetUrl: shallowRef(''),
  imageUrl: shallowRef(),
  created: getDetailedDateTime(),
  rotate_id: shallowRef(),
});

// 父组件传过来被选择项
const props = defineProps({
  change: Array
})


watchEffect(async () => {
  if (!!props.change) {
    form.imageUrl = props.change[0].image_url
    form.targetUrl = props.change[0].target_url
    form.rotate_id = props.change[0].rotate_id
    // console.log(1);
  }
  else {
    form.imageUrl = '';
    form.targetUrl = '';
  }
})
// console.log(props.change[0].userName);


const dialogVisible = ref(false)
const fileList = ref([]);



const watchUpload = (file) => {
  // 检查文件是否超出大小限制
  console.log(file.size);
  if (file.size > MAX_FILE_SIZE) {
    alert('上传的文件过大，不能超过' + (MAX_FILE_SIZE) / 1024 / 1024 + "。请上传大小合适的文件。");
    return form.imageUrl = '';

  } else {
    fileList.value = [file];
    form.imageUrl = URL.createObjectURL(file.raw);
    fileToBase64(file.raw).then((base64Data) => {
      form.imageUrl = base64Data
      // console.log(base64Data);
    })
  }
};



const handleRemove = (file, fileList) => {
  fileList.splice(fileList.indexOf(file), 1);
  // 根据 file 对象在 fileList 中的索引位置（通过 indexOf(file) 找到）
  // 来移除这个文件对象。具体操作是使用 splice 方法
  // 第一个参数是要移除的元素的索引，第二个参数是要移除的元素个数。
  form.imageUrl = ''; // 清空图片URL
};

const beforeRemove = (file, fileList) => {
  return fileList.length > 1; // 只剩一张图片时阻止删除
  // 具体意思是：如果文件列表中的文件数量大于1，就返回 true，允许删除；
  // 如果文件列表中的文件数量小于等于1，就返回 false，阻止删除操作。
};

const handlePictureCardPreview = (file) => {
  // 图片预览功能，此处可以为空
  dialogVisible.value = true
};


// 点击确认
const onSubmit = () => {
  if (!!props.change) {
    console.log('Submitted form data:', form);
    ChangeRotating({
      image_url: form.imageUrl,
      target_url: form.targetUrl,
      updated_at: form.created,
      rotate_id: form.rotate_id
    }).then(res => {
      if (res.msgType == 8000) {
        emits('confirmChange', form)
      }
      showMessage(res)

    })
  }
  else {
    AddRotating({
      target_url: form.targetUrl,
      image_url: form.imageUrl,
      created_at: form.created
    }).then(res => {
      if (res.msgType == 8000) {
        emits('confirm')
      }
      showMessage(res)

    })
  }
};


// 点击取消，重置输入框
const cancel = () => {
  form.imageUrl = '';
  form.targetUrl = '';
}
</script>